<template>
  <div class="container">
    <div class="handle-box">
      <el-row :gutter="25">
        <el-col :span="8">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="项目名称：">
               <el-input
                 v-model="form.nameProject"
                 placeholder="请输入名称"
                 class="handle-input mr10"
               ></el-input>
             </el-form-item>
             <!-- <el-form-item label="所属项目：">
               <el-select
                 v-model="form.SELECT_CLIENT_NO"
                 filterable
                 placeholder="请选择"
               >
                 <el-option
                   v-for="(item, index) in clientSelectListForm"
                   :key="index"
                   :label="item.CLIENT_NAME"
                   :value="item.CLIENT_NO"
                 >
                 </el-option>
               </el-select>
             </el-form-item> -->
             <!-- <el-form-item label="组织级别：">
               <el-select v-model="form.SELECT_RLEVEL" placeholder="请选择">
                 <el-option
                   v-for="(item, index) in rolelevel"
                   :key="index"
                   :label="item.roleleveltitle"
                   :value="item.rolelevelindex"
                 >
                 </el-option>
               </el-select>
             </el-form-item> -->
          </el-form>
        </el-col>
        <el-col :span="10">
          <el-form ref="form" :model="form" style="float: left">
            <el-form-item>
              <el-button type="primary" size="mini" icon="el-icon-search" @click="screeningData"
                >查询</el-button
              >
              <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAdd"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column prop="CLIENT_NAME" label="项目名称"></el-table-column>
      <el-table-column
        prop="CLIENT_NO"
        label="项目编号"
      ></el-table-column>
      <!-- <el-table-column prop="CTYPE_NAME" label="组织级别"></el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="editDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="100px" class="flex">
        <!-- <el-form-item label="所属项目：" class="wid50">
          <el-select v-model="form.CLIENT_NO" filterable placeholder="请选择">
            <el-option
              v-for="(item, index) in clientSelectList"
              :key="index"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="组织级别：" class="wid50">
          <el-select v-model="form.RLEVEL" placeholder="请选择">
            <el-option
              v-for="(item, index) in rolelevel.slice(1)"
              :key="index"
              :label="item.roleleveltitle"
              :value="item.rolelevelindex"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="项目名称" class="wid50">
          <el-input
            v-model="form.CLIENTNAME"
            placeholder="请输入项目名称"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import '@/assets/css/common.css'

export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      isVisibleEdit: false,
      editDialogTitle: '',
      form: {
        nameProject: '',
        SELECT_CLIENT_NO: '0',
        SELECT_RLEVEL: '0',
      },
      rolelevel: [{
        roleleveltitle: '全部',
        rolelevelindex: '0'
      }, {
        roleleveltitle: '机扫',
        rolelevelindex: '1'
      }, {
        roleleveltitle: '垃圾',
        rolelevelindex: '2'
      }, {
        roleleveltitle: '人工',
        rolelevelindex: '3'
      }, {
        roleleveltitle: '公厕维保',
        rolelevelindex: '4'
      }],
      clientSelectListForm: [{ "CLIENT_NO": "0", "CLIENT_NAME": "全部" }],
      clientSelectList: [],
      // 原始数据
      originalData: [],
      tableData: []
    }
  },
  created () {
    // this.getClientSelect();
    this.getClientRoleList();
  },
  methods: {
    // 获取当前公司、项目下的项目
    // async getClientSelect () {
    //   var url = 'Role/getClientRoleList?CTYPE=0&ClientNo=' + localStorage.getItem('CLIENT_NO_LOGIN')
    //   const { data } = await this.$Http.get(url)
    //   this.clientSelectList = data
    //   data.forEach(element => {
    //     this.clientSelectListForm.push(element)
    //   });
    // },
    // 获取项目列表
    async getClientRoleList () {
      var url = 'Role/getClientRoleList?CTYPE=0&ClientNo=' + localStorage.getItem('CLIENT_NO_LOGIN')
      const { data } = await this.$Http.get(url)
      // for (var i = data.length - 1; i >= 0; i--) {
      //   if (data[i].CTYPE == '-1' || data[i].CTYPE == '0') {
      //     data.splice(i, 1);
      //   } else {
      //     var val = data[i];
      //     if (val.CTYPE == '1') {
      //       val.CTYPE_NAME = '机扫'
      //     }
      //     if (val.CTYPE == '2') {
      //       val.CTYPE_NAME = '垃圾'
      //     }
      //     if (val.CTYPE == '3') {
      //       val.CTYPE_NAME = '人工'
      //     }
      //     if (val.CTYPE == '4') {
      //       val.CTYPE_NAME = '公厕维保'
      //     }
      //     this.clientSelectList.forEach(element => {
      //       if (val.CLIENT_NO.includes(element.CLIENT_NO)) {
      //         val.superClientName = element.CLIENT_NAME
      //       }
      //     });
      //   }
      // }
      this.originalData = data
      this.screeningData()
    },
    screeningData () {
      this.currentPage = 1
      this.tableData = this.originalData
      if (this.form.nameProject !== '' && this.form.nameProject) this.tableData = this.tableData.filter(item => item.CLIENT_NAME.includes(this.form.nameProject))
      // if (this.form.SELECT_RLEVEL !== '0') this.tableData = this.tableData.filter(item => item.CTYPE === this.form.SELECT_RLEVEL)
    },
    // 打开新增窗口
    handleAdd () {
      this.editDialogTitle = '新增项目'
      //清空编辑框
      this.form = {}
      //展示窗口
      this.isVisibleEdit = true;
      // this.idEdit = false;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      // this.form = row;
      this.form = Object.assign({}, row);
      this.editDialogTitle = '编辑项目'
      this.isVisibleEdit = true;
      // this.idEdit = true;
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.editDialogTitle == '新增项目') {
        this.saveAdd()
      } else {
        this.saveEdit()
      }
    },
    // 新增保存
    async saveAdd () {
      const params = {
        CLIENTNO: localStorage.getItem('CLIENT_NO_LOGIN'),
        CLIENTNAME: this.form.CLIENTNAME,
        CTYPE: '0',
      }
      // console.log('新增项目参数：')
      // console.log(params)
      const { data } = await this.$Http.get('Role/AddClentInfo', { params })
      if (data.IsSucess) {
        this.$message.success('新增成功')
        this.isVisibleEdit = false
        this.getClientRoleList()
      } else {
        if (data.Message === 'NameRepeat') {
          this.$message.error('该组织级别中已存在此项目名称，请重新填入未使用的项目名称')
        }
      }
    },
    // 保存编辑
    async saveEdit () {

    },
    // 删除项目
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          CLIENTNAME: row.CLIENT_NAME,
          CTYPE: row.CTYPE,
        }
        const { data } = await this.$Http.get('Role/DeletedClentInfo', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getClientRoleList()
        }else {
            this.$message.error('删除失败');
          } 
      }else{
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }
      
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
    },
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
  max-width: 200px;
}
.el-input {
  width: 100%;
  max-width: 200px;
}
/* .displaynone {
  display: block;
}
.displaytnone {
  display: block;
}
.displayenone {
  display: block;
}
.displayfnone {
  display: block;
} */
</style>